<template>
  <div class="add-enterprise enterprise-container">
    <header class="add-header">
      楼宇名称：
      <el-input v-model="input" placeholder="请输入楼宇名称"></el-input>
      <el-button type="primary" @click="search">查询</el-button>
    </header>
<el-divider></el-divider>
<div class="create-container">
<el-button type="primary" @click="addBuilding" v-auth-btn="'park:building:add_edit'"
        >添加楼宇</el-button
      >
      </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="序号"
        width="180">
        <template slot-scope="scope">
        {{ params.pageSize*(params.page-1)+scope.$index + 1 }}
      </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="楼宇名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="floors"
        label="层数">
      </el-table-column>
      <el-table-column
        prop="area"
        label="在管面积(m²)">
      </el-table-column>
      <el-table-column
        prop="propertyFeePrice"
        label="物业费单价(元/m²)">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
        {{ scope.row.status===1?'租赁中':'空置中' }}
      </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template #default="scope">
              <el-button size="mini" type="text" @click="dialog(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="text" @click="delRent(scope.row.id)"
                >删除</el-button
              >
            </template>
      </el-table-column>
    </el-table>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="pageChange"
      :current-page="params.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="params.pageSize"
      layout="total,  prev, pager, next, sizes, jumper"
      :total="total">
    </el-pagination>
  <!-- chuangkou -->
  <el-dialog
  title="编辑楼宇"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">

  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="楼宇名称" :label-width="formLabelWidth" prop="name">
      <el-input v-model="form.name" autocomplete="off" placeholder="请输入楼宇名称"></el-input>
    </el-form-item>
    <el-form-item label="楼宇层数" :label-width="formLabelWidth" prop="floors">
      <el-input v-model="form.floors" autocomplete="off" placeholder="请输入楼宇层数"></el-input>
    </el-form-item>
    <el-form-item class="one" label="在管面积" :label-width="formLabelWidth" prop="area">
      <div class="oneSpan">
        <el-input v-model="form.area" autocomplete="off" placeholder="请输入在管面积"></el-input>
      <div class="span">m²</div>
      </div>
    </el-form-item>
    <el-form-item class="one" label="物业费" :label-width="formLabelWidth" prop="propertyFeePrice">
      <div class="oneSpan">
        <el-input v-model="form.propertyFeePrice" autocomplete="off" placeholder="请输入物业费"></el-input>
      <div class="span2">元/m²</div>
      </div>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmSubmit">确 定</el-button>
  </span>
</el-dialog>

  </div>

</template>

<script>
import {getListAPI,updateBuildingAPI,delBuildingAPI} from '@/api/building'
export default {
  name: "Enterprise",
  data() {
    return {
      getId:0,
      form:{
        name:'',
        floors:'',
        area:'',
        propertyFeePrice:''
      },
      rules:{
        name:[
          { required: true, message: "请输入楼宇名称", trigger: "blur" },
        ],
        floors:[
          { required: true, message: "请输入楼宇层数", trigger: "blur" },
        ],
        area:[
          { required: true, message: "请输入在管面积", trigger: "blur" },
        ],
        propertyFeePrice:[
          { required: true, message: "请输入物业费", trigger: "blur" },
        ]
      },
      dialogVisible:false,
      total:0,
      input:'',
      tableData: [],
      params:{
        page: "1",
        pageSize: "10",
        name:''
      }
    }
  },
  methods:{
    addBuilding(){
      this.form.name=''
      this.form.floors=''
      this.form.area=''
      this.form.propertyFeePrice=''
      this.dialogVisible=true
    },
    async delRent(id){
      await delBuildingAPI(id)
      this.render(this.params)
    },
    confirmSubmit(){
      this.$refs.form.validate(async (valid) => {
        if(!valid)return;
        if(this.getId){
          await updateBuildingAPI({
            ...this.form,
            id:parseInt(this.getId)
          })
          this.dialogVisible = false
          this.render(this.params)
        }
      });
    },
    dialog(list){
      const{name,floors,area,propertyFeePrice}=list
      this.form={name,floors,area,propertyFeePrice}
      this.dialogVisible = true
      this.getId=list.id
    },
    handleSizeChange(pageSize){
     this.params.pageSize=pageSize
      this.render(this.params);
    },
    search(){
      this.params.name=this.input
      this.render(this.params);
    },
    pageChange(page) {
      this.params.page = page;
      this.render(this.params);
    },
    async render(params){
      try{
        const {data}=await getListAPI(params)
        this.total=data.total
      this.tableData=data.rows
      }catch(err){
        console.log(err);
      }
    }
  },
  created(){
    this.render(this.params)
  }
}
</script>

<style scoped lang="scss">
.oneSpan{
  width: 100%;
  display: flex;
}
::v-deep .one .el-input__inner{
  flex-grow:1;
}
.one .span{
  text-align: center;
  width: 50px;
  background-color: rgba(0,0,0,0.05);
}
.one .span2{
  text-align: center;
  width: 70px;
  background-color: rgba(0,0,0,0.05);
}
  ::v-deep thead.has-gutter th{
    background-color: #f4f6f8;
  }
.add-header{
  display: flex;
  line-height: 40px;
  .el-input{
    width: 300px;
    margin-right: 20px;
  }
}
::v-deep .el-pagination{
  text-align: right;
  margin: 20px;
}
.create-container{
  margin-bottom: 20px;
}
</style>
